<template>
	<view class="">
		<cu-navbar :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">授权登录</block>
		</cu-navbar>
		<view class="auth-content">
			<view class="login-m">
				<view class="login-item">
					<view class="logo">
						<!-- #ifdef MP-WEIXIN || MP-QQ -->
						<open-data type="userAvatarUrl"></open-data>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<image :src="logoImage" mode="" style="width: 100%;height: 100%;"></image>
						<!-- #endif -->
					</view>
				</view>
				<view class="login-tip">
					<view class="login-tip-big">申请获取以下权限</view>
					<view class="login-tip-small">获得你的公开信息 （昵称、头像等）</view>
				</view>
			</view>
			<view class="flex justify-center">
				<!-- #ifdef MP-QQ -->
				<button class="cu-btn round bg-grey" @click="handleRefuse">拒绝</button>
				<button class="cu-btn round bg-mauve margin-left-xs" open-type="getUserInfo" @getuserinfo="getUserInfo" hover-class="btn-hover">允许</button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="cu-btn round bg-grey" @click="handleRefuse">拒绝</button>
				<button class="cu-btn round bg-mauve margin-left-xs" @click="getUserInfo" hover-class="btn-hover">允许</button>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<button class="cu-btn round" @click="getALICode" hover-class="btn-hover">授权登录</button>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<button class="cu-btn round bg-mauve padding-lr-xl" @click="getTouCode" hover-class="btn-hover">授权登录</button>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	computed: {
		logoImage() {
			return this.vuex_config.logo || '';
		}
	},
	onLoad() {
		const that = this;
		// #ifdef MP-WEIXIN || MP-QQ
		this.getCode(function(code) {
			var data = {
				code: code
			};
			// #ifdef MP-WEIXIN
			data.type = 'wechat';
			// #endif
			// #ifdef MP-QQ
			data.type = 'qq';
			// #endif
			that.$api.login1(data).then(res => {
				if (!res.code) {
					that.$common.successToShow(res.msg, function() {
						uni.navigateBack({
							delta: 1
						});
					});
				}
			});
		});
		// #endif

		// #ifdef MP-TOUTIAO
		this.getCode(function(code) {
			var data = {
				code: code
			};
			that.$api.ttlogin1(data).then(res => {
				if (!res.code) {
					that.$common.successToShow(res.msg, function() {
						uni.navigateBack({
							delta: 1
						});
					});
				}
			});
		});
		// #endif
	},
	methods: {
		getCode: function(callback) {
			uni.login({
				// #ifdef MP-ALIPAY
				scopes: 'auth_user',
				// #endif
				success: function(res) {
					if (res.code) {
						return callback(res.code);
					} else {
						//login成功，但是没有取到code
						this.$common.errorToShow('未取得code');
					}
				},
				fail: function(res) {
					this.$common.errorToShow('用户授权失败wx.login');
				}
			});
		},
		// #ifdef MP-WEIXIN || MP-QQ
		handleRefuse() {
			uni.showToast({
				title: '未授权',
				icon: 'none',
				duration: 1000
			});
			setTimeout(() => {
				uni.hideToast();
				uni.navigateBack(-1);
			}, 1000);
		},
		// #ifdef MP-QQ
		getUserInfo: function(e) {
			let that = this;
			if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
				that.$common.errorToShow('未授权');
			} else {
				var data = {
					iv: e.detail.iv,
					edata: e.detail.encryptedData,
					signature: e.detail.signature,
					type:'qq'
				};
				//有推荐码的话，带上
				var invitecode = that.$db.get('invitecode');
				if (invitecode) {
					data.invitecode = invitecode;
				}
				that.toLogin(data);
			}
		},
		// #endif
		// #ifdef MP-WEIXIN
		getUserInfo: function() {
			let that = this;
			wx.getUserProfile({
				lang: 'zh',
				desc: '用户信息绑定',
				success: function(e) {
					var data = {
						userinfo: e.userInfo
					};
					//有推荐码的话，带上
					var invitecode = that.$db.get('invitecode');
					if (invitecode) {
						data.invitecode = invitecode;
					}
					that.toLogin(data);
				},
				fail: function(e) {
					console.log(e);
					that.$common.errorToShow(JSON.stringify(e));
				}
			});
		},
		// #endif
		//实际的去登陆
		toLogin: function(data) {
			let that = this;
			that.$api.login2(data).then(function(res) {
				if (res.code == 1) {
					//没有绑定账号，跳转到绑定页面
					if (res.data == 100) {
						that.$common.navigateTo(that.$ph.login);
					} else {
						//登陆成功，设置userinfo，并返回上一页
						that.$vuex('vuex_user', res.data.userinfo);
						uni.navigateBack({
							delta: 1
						});
						return false;
					}
				} else {
					that.$common.errorToShow('登录失败，请重试');
				}
			});
		},
		// #endif
		// #ifdef MP-TOUTIAO
		getTouCode() {
			let that = this;
			uni.getUserInfo({
				success: function(infoRes) {
					console.log(infoRes);
					that.$api
						.ttlogin2({
							userInfo: infoRes.userInfo
						})
						.then(res => {
							//没有绑定账号，跳转到绑定页面
							if (res.data == 100) {
								that.$common.navigateTo(that.$ph.login);
							} else {
								//登陆成功，设置userinfo，并返回上一页
								that.$vuex('vuex_user', res.data.userinfo);
								uni.navigateBack({
									delta: 1
								});
								return false;
							}
						});
				}
			});
		},
		// #endif
		// #ifdef MP-ALIPAY
		getALICode() {
			let that = this;
			uni.login({
				scopes: 'auth_user',
				success: res => {
					if (res.authCode) {
						uni.getUserInfo({
							provider: 'alipay',
							success: function(infoRes) {
								if (infoRes.errMsg == 'getUserInfo:ok') {
									let user_info = {
										nickname: infoRes.nickName,
										avatar: infoRes.avatar
									};
									that.aLiLoginStep1(res.authCode, user_info);
								}
							},
							fail: function(errorRes) {
								this.$common.errorToShow('未取得用户昵称头像信息');
							}
						});
					} else {
						this.$common.errorToShow('未取得code');
					}
				},
				fail: function(res) {
					this.$common.errorToShow('用户授权失败my.login');
				}
			});
		},
		aLiLoginStep1(code, user_info) {
			let data = {
				code: code,
				user_info: user_info
			};
			this.$api.alilogin1(data).then(res => {
				this.alipayNoLogin = false;
				if (res.code == 1) {
					//判断是否返回了userinfo，如果没有，就说明没有绑定账号，跳转到绑定页面
					if (!res.data == 100) {
						this.$common.redirectTo('/pages/login/login/index');
					} else {
						this.$vuex('vuex_user', res.data.userinfo);
						uni.navigateBack({
							delta: 1
						});
					}
				} else {
					this.$common.errorToShow(res.msg);
				}
			});
		}
		// #endif
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}
.auth-content {
	background-color: #fff;
	height: 92vh;
	padding: 100rpx 60rpx 0;
}

.login-item {
	display: flex;
	justify-content: center;
	padding-bottom: 40rpx;
	border-bottom: 1rpx solid #dddddd;
}

.logo {
	display: block;
	width: 180rpx;
	height: 180rpx;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #fff;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.login-tip {
	padding: 60rpx 0;

	&-big {
		font-size: 28rpx;
		line-height: 80rpx;
	}

	&-small {
		font-size: 12px;
		color: #9e9e9e;
	}
}

.app-name {
	font-size: 28rpx;
	color: #999;
}

.cu-btn.round {
	width: 50%;
	height: 80rpx;
}
</style>
